<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css"
	href="https://s4.wandougongzhu.cn/h5/css/user/login_ad0314.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/statics/CSS/wdgz.css">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script
	src="${pageContext.request.contextPath }/statics/JS/jquery-1.8.3.js"></script>
<style type="text/css">
/*  .poster h1{
        background: none;
    }
    */
.op-nav #active {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	text-align: center;
	position: relative;
}

.op-nav #login {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	text-align: center;
	position: relative;
}

#login:after {
	content: ' ';
	width: 0;
	height: 0;
	border: .13rem solid transparent;
	border-bottom: .13rem solid #fff;
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.x-dialog {
	display: none;
}

#login {
	position: relative;
}

#active {
	position: static;
}
</style>
</head>
<body>
	<form action="${pageContext.request.contextPath }/user/doLogin.html"
		method="get" name="loginForm">
		<div class="poster">
			<h1>一米韩妆</h1>
			<h3>享受另一种精致</h3>
		</div>
		<div id="app">
			<nav class="op-nav">
				<div data-view="reg" class="active" id="active">注册</div>
				<div data-view="login" id="login">登录</div>
				<div data-view="weixin" style="display: none;">注册</div>
			</nav>
			<div class="app-body">
				<div class="x-passport" style="display: none;">
					<form>
						<div class="ipt-box border-1px-bottom">
							<input placeholder="手机号码" name="phone" type="number">
							<button class="verify-btn" type="button" disabled="">获取短信验证码</button>
						</div>
						<div class="ipt-box border-1px-bottom">
							<input placeholder="验证码" name="vcode" type="number">
						</div>
						<button type="submit" class="submit-btn">绑定手机，完成注册</button>
						<div class="quick-login-tip">* 以后可使用此微信号快速登录</div>
					</form>
				</div>
				<div class="x-passport form2">
					<div class="ipt-box border-1px-bottom">
						<input placeholder="UserCode" name="usercode" type="text"
							id="usercode">
					</div>
					<div class="ipt-box border-1px-bottom">
						<input placeholder="PassWord" name="password" type="password" id="password">
						<button class="eye-btn" type="button"></button>
					</div>
					<div class="ipt-box">
						<button type="submit" class="submit-btn" id="dengluBtn">登录</button>
					</div>
					<div class="find-password">
						<a href="resetpwd.html">忘记密码？</a>
					</div>
					<div class="wx-login" style="display: none;">
						<a
							href="/user/redirectCleanWeixinAuthKey?url=https%3A%2F%2Fm.wandougongzhu.cn%2Fuser%2F">
							<img src="">
							<div>微信快速登录</div>
						</a>
					</div>
				</div>
				<div class="x-passport form3" style="display: none;">
					<div class="ipt-box border-1px-bottom">
						<input placeholder="手机号码" name="phone" type="number"
							id="activePhone">
						<button class="verify-btn" type="button" disabled="">获取短信验证码</button>
					</div>
					<div class="ipt-box">
						<div class="reg-vcode-box border-1px-bottom">
							<input placeholder="验证码" name="vcode" type="text" id="activeYzm">
						</div>
						<div class="reg-pwd-box border-1px-bottom">
							<input placeholder="密码" id="activePwd" name="pwd" type="password">
							<button class="eye-btn" type="button"></button>
						</div>
					</div>
					<button type="submit" class="submit-btn" id="zhuceBtn">注册</button>
				</div>
			</div>
		</div>

		<div class="x-qtip" style="display: none;">
			<div class="x-qtip-body">
				<div class="x-qtip-icon">
					<i></i>
				</div>
				<div class="x-qtip-msg">请输入手机号码</div>
			</div>
		</div>


		<div>
			<div class="x-dialog">
				<div class="x-dialog-mask"></div>
				<div class="x-dialog-box">
					<div class="x-dialog-body">
						<form>
							<div class="valide-code-tip">需要输入图片验证码</div>
							<div class="valide-code-box">
								<input placeholder="请输入验证码"> <img
									src="https://m.wandougongzhu.cn/user/validateCode?t=1504691471830"
									id="pic">
							</div>
						</form>

					</div>
					<div class="x-dialog-btn-panel">
						<button class="x-dialog-btn">取消</button>
						<button class="x-dialog-btn border-1px-left x-dialog-btn-hl">确定</button>
					</div>
				</div>
			</div>
		</div>
	</form>
</body>
<script type="text/javascript">
	$(function() {
		/*登陆界面*/
		var phoneReg = /^1[13578]\d{9}$/;
		var pwdReg = /^[a-zA-Z]\w{5,17}$/;
		$("#active").css("position", "static");
		$("#login").click(function() {
			$(".form2").css("display", "block");
			$(".form3").css("display", "none");
			$(".op-nav #active").css("position", "static");
			$("#login").css("position", "relative");
		});
		/*注册界面*/
		$("#active").click(function() {
			$(".form2").css("display", "none");
			$(".form3").css("display", "block");
			$(".op-nav #active").css("position", "relative");
			$("#login").css("position", "static");
		});

		/*密码可见*/
		$(".eye-btn").click(function() {
			$(".eye-btn").toggleClass("eye-visible")
		});

		/*点击验证码图片刷新*/
		/*
		$("#pic").click(function () {
		       $(this).ajax({
		           url:'https://m.wandougongzhu.cn/user/validateCode?t=1504691471830',
		           type:'post'
		       });
		   })
		 */

		/*注册页开始验证*/
		$("#zhuceBtn").click(
				function() {
					var activePhone = $("#activePhone").val().length;
					var activeYzm = $("#activeYzm").val().length;
					var activePwd = $("#activePwd").val().length;

					if (activePhone === 0
							&& (activeYzm === 0 || activeYzm !== 0)
							&& (activePwd === 0 || activePwd !== 0)) {
						$(".x-qtip").show().delay(2000).fadeOut();
					} else if (!phoneReg.test($("#activePhone").val())) {
						$(".x-qtip .x-qtip-msg").html("输入的手机号码不正确");
						$(".x-qtip").show().delay(2000).fadeOut();
						return false;
					} else if (activePhone !== 0 && activeYzm === 0) {
						$(".x-qtip .x-qtip-msg").html("请输入验证码");
						$(".x-qtip").show().delay(2000).fadeOut();
					} else if (activePhone !== 0 && activeYzm < 4) {
						$(".x-qtip .x-qtip-msg").html("验证码必须为四位数字");
						$(".x-qtip").show().delay(2000).fadeOut();
					} else if (activePhone !== 0 && activeYzm === 4
							&& activePwd === 0) {
						$(".x-qtip .x-qtip-msg").html("请输入密码");
						$(".x-qtip").show().delay(2000).fadeOut();
					} else if (!pwdReg.test($("#activePwd").val())) {
						$(".x-qtip .x-qtip-msg").html(
								"以字母开头，长度在6-18之间，只能包含字母，数字和下划线");
						$(".x-qtip").show().delay(4000).fadeOut();
						return false;
					}

				});
		/* 手机号码满11位数字 */
		$("#activePhone").keyup(function() {
			if (($("#activePhone").val().length) === 11) {
				$(".verify-btn").removeAttr("disabled");
			} else {
				$(".verify-btn").attr("disabled", "");
			}
		});
		/* 点击获取短信验证码*/
		$(".verify-btn").click(function() {
			$(".x-dialog").animate("slow").show();
		});

		/*验证码窗口关闭*/
		$(".x-dialog-btn").click(function() {
			$(".x-dialog").css("display", "none");
		});
		/*注册页结束验证*/

		/*登陆页开始验证*/
		$("#dengluBtn").click(function() {
			var loginPhone = $("#loginPhone").val().length;
			var loginPwd = $("#loginPwd").val().length;
			if (loginPhone === 0) {
				$(".x-qtip").show().delay(2000).fadeOut();
			} else if (!phoneReg.test($("#loginPhone").val())) {
				$(".x-qtip .x-qtip-msg").html("输入的手机号码不正确");
				$(".x-qtip").show().delay(2000).fadeOut();
				return false;
			} else if (loginPhone !== 0 && loginPwd === 0) {
				$(".x-qtip .x-qtip-msg").html("请输入密码");
				$(".x-qtip").show().delay(2000).fadeOut();
			} else if (!pwdReg.test($("#loginPwd").val())) {
				$(".x-qtip .x-qtip-msg").html("以字母开头，长度在6-18之间，只能包含字母，数字和下划线");
				$(".x-qtip").show().delay(4000).fadeOut();
				return false;
			}
		});
		/*登陆页验证结束*/
	});
	/*注册页点击验证码图片刷新*/
	var myimg = document.getElementById("pic");
	myimg.onclick = function() {
		var now = new Date();
		myimg.src = "https://m.wandougongzhu.cn/user/validateCode?t=1"
				+ now.getTime();
	};
</script>

</html>